<template>
    <div class="common-layout">
        <el-container>
            <el-header style="height: 200px;border-style: groove;">
                <table>
                    <tr>
                        <td>
                            <el-upload class="avatar-uploader"
                                action="https://localhost:44301/api/AdminStystem/uploadFile" :show-file-list="false"
                                :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
                                <img v-if="Traceabilities.phtoto" :src="Traceabilities.phtoto" class="avatar" />
                                <el-icon v-else class="avatar-uploader-icon">
                                    <Plus />
                                </el-icon>
                            </el-upload>
                        </td>
                        <td>
                            <span>
                                <h2>{{ Traceabilities.goodsName }}</h2>
                            </span><br />
                            <span>生产批次：{{ Traceabilities.produce }}</span>
                            <span>保质期：{{ Traceabilities.safetyDay }}天</span><br />
                            <span>生产许可证号：{{ Traceabilities.licenseNumber }}</span>
                            <span>生产企业：{{ Traceabilities.enterprise }}</span>
                        </td>
                    </tr>
                </table>
            </el-header>
            <el-main style="border-style: groove;margin-top: 15px; ">
                <div style="margin-bottom: 20px;">
                    <el-button type="primary" @click="toCultivation">养殖信息</el-button>
                    <el-button type="primary" @click="totSlaughter">屠宰信息</el-button>
                    <el-button type="primary">深加工</el-button>
                </div>
                <div style="border-style: groove;margin-bottom: 10px;">
                    <span style="color:dodgerblue;"> 深加工信息</span> <el-button
                        @click="dialogFormVisible = true">设置</el-button>

                    <el-form :inline="true" :model="formInline" style="width: 350px;margin-top: 15px;">
                        <el-form-item label="班组:">
                            {{ formInline.team }}
                        </el-form-item>
                        <el-form-item label="负责人：">
                            {{ formInline.person }}
                        </el-form-item>

                    </el-form>
                    <el-dialog v-model="dialogFormVisible" title="深加工信息" width="500">
                        <el-form :model="form" label-width="140px">
                            <el-form-item label="班组">
                                <el-input v-model="form.team" />
                            </el-form-item>
                            <el-form-item label="负责人">
                                <el-input v-model="form.person" />
                            </el-form-item>
                        </el-form>
                        <template #footer>
                            <div class="dialog-footer">
                                <el-button type="primary" @click="SaveCultivation">
                                    保存
                                </el-button>
                            </div>
                        </template>
                    </el-dialog>
                </div>
                <div style="border-style: groove;">
                    <h3><span style="color:dodgerblue;">供应商信息</span></h3>

                    <span>原料</span><el-button @click="openrawmaterial">设置</el-button>
                    <el-form :inline="true" :model="formpEnterprise" style="width: 350px;margin-top: 15px;">
                        <el-form-item label="生产批次:">

                            {{ formrawmaterial.rawMaterialProduce }}
                        </el-form-item>
                    </el-form>
                    <el-dialog v-model="dialogFormVisible2" title="原料信息" width="500">
                        <el-form :model="formEnterprise" label-width="140px">
                            <el-form-item label="生产批次">
                                <el-input v-model="formrawmaterial.rawMaterialProduce" />
                            </el-form-item>
                        </el-form>
                        <template #footer>
                            <div class="dialog-footer">
                                <el-button type="primary" @click="SaveRawMaterial">
                                    保存
                                </el-button>
                            </div>
                        </template>
                    </el-dialog>
                    <span>辅料</span><el-button @click="dialogFormVisible3 = true">设置</el-button>
                    <el-form :inline="true" :model="formAccessories" style="width: 350px;margin-top: 15px;">
                        <el-form-item label="生产批次:">

                            {{ formAccessories.accessoriesProduce }}
                        </el-form-item>
                    </el-form>
                    <el-dialog v-model="dialogFormVisible3" title="辅料信息" width="500">
                        <el-form :model="formEnterprise" label-width="140px">
                            <el-form-item label="生产批次">
                                <el-input v-model="formAccessories.accessoriesProduce" />
                            </el-form-item>
                        </el-form>
                        <template #footer>
                            <div class="dialog-footer">
                                <el-button type="primary" @click="SaveAccessories">
                                    保存
                                </el-button>
                            </div>
                        </template>
                    </el-dialog>
                    <span>添加剂</span><el-button @click="dialogFormVisible4 = true">设置</el-button>
                    <el-form :inline="true" :model="formAdditive" style="width: 350px;margin-top: 15px;">
                        <el-form-item label="生产批次:">

                            {{ formAdditive.additiveProduce }}
                        </el-form-item>
                    </el-form>
                    <el-dialog v-model="dialogFormVisible4" title="添加剂信息" width="500">
                        <el-form :model="formEnterprise" label-width="140px">
                            <el-form-item label="生产批次">
                                <el-input v-model="formAdditive.additiveProduce" />
                            </el-form-item>
                        </el-form>
                        <template #footer>
                            <div class="dialog-footer">
                                <el-button type="primary" @click="SaveAdditive">
                                    保存
                                </el-button>
                            </div>
                        </template>
                    </el-dialog>
                    <span>包材</span><el-button @click="dialogFormVisible5 = true">设置</el-button>
                    <el-form :inline="true" :model="formAdditive" style="width: 350px;margin-top: 15px;">
                        <el-form-item label="生产批次:">

                            {{ formPackaging.packagingMaterialsProduce }}
                        </el-form-item>
                    </el-form>
                    <el-dialog v-model="dialogFormVisible5" title="包材信息" width="500">
                        <el-form :model="formEnterprise" label-width="140px">
                            <el-form-item label="生产批次">
                                <el-input v-model="formPackaging.packagingMaterialsProduce" />
                            </el-form-item>
                        </el-form>
                        <template #footer>
                            <div class="dialog-footer">
                                <el-button type="primary" @click="SavePackaging">
                                    保存
                                </el-button>
                            </div>
                        </template>
                    </el-dialog>
                </div>
                <div style="border-style: groove; margin-top: 15px;">
                    <span style="color:dodgerblue;">企业信息</span> <el-button
                        @click="dialogFormVisible1 = true">设置</el-button>
                    <el-form :inline="true" :model="formpEnterprise" style="width: 350px;margin-top: 15px;">
                        <el-form-item label="公司名称:">
                            {{ formpEnterprise.firmName }}
                        </el-form-item>
                        <el-form-item label="生产许可证号：">
                            {{ formpEnterprise.licenseNumber }}
                        </el-form-item>
                    </el-form>
                    <span style="color:dodgerblue;">企业照片</span>
                    <el-upload class="avatar-uploader" action="https://localhost:44301/api/AdminStystem/uploadFile"
                        :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
                        <img v-if="formEnterprise.ePhoto" :src="formEnterprise.ePhoto" class="avatar" />
                        <el-icon v-else class="avatar-uploader-icon">
                            <Plus />
                        </el-icon>
                    </el-upload>

                    <el-dialog v-model="dialogFormVisible1" title="企业信息" width="500">
                        <el-form :model="formEnterprise" label-width="140px">
                            <el-form-item label="公司名称">
                                <el-input v-model="formEnterprise.firmName" />
                            </el-form-item>
                            <el-form-item label="生产许可证号">
                                <el-input v-model="formEnterprise.licenseNumber" />
                            </el-form-item>

                        </el-form>
                        <template #footer>
                            <div class="dialog-footer">
                                <el-button type="primary" @click="SaveEnterprise">
                                    保存
                                </el-button>
                            </div>
                        </template>
                    </el-dialog>
                </div>

            </el-main>
        </el-container>
    </div>
</template>
<script lang="ts" setup>
import axios from 'axios'
import { ElMessage } from 'element-plus'
import { onMounted, reactive, ref } from 'vue'
import { Plus } from '@element-plus/icons-vue'
import type { UploadProps } from 'element-plus'
import { useRouter } from 'vue-router'
const userouter = useRouter()
import router from '@/router'
const Traceabilities = reactive({
    traceabilityId: 0,
    goodsId: userouter.currentRoute.value.query.id,
    produce: "",
    safetyDay: 0,
    licenseNumber: "",
    enterprise: "",
    informationComp: "",
    phtoto: "",
    goodsName: ""
})
const GetTraceabilities = () => {
    axios.get('https://localhost:44301/api/AdminStystem/Gettraceability', {
        params: {
            id: userouter.currentRoute.value.query.id
        }
    }).then(res => {
        console.log(res.data.data)
        Traceabilities.produce = res.data.data[0].produce
        Traceabilities.safetyDay = res.data.data[0].safetyDay
        Traceabilities.licenseNumber = res.data.data[0].licenseNumber
        Traceabilities.enterprise = res.data.data[0].enterprise
        Traceabilities.phtoto = res.data.data[0].phtoto
        Traceabilities.goodsName = res.data.data[0].goodsName
    })
}
//#region 深加工信息
const formInline = reactive({
    goodsId: 1,
    team: "",
    person: ""
})

const getCultivation = () => {
    axios.get('https://localhost:44301/api/Processingr/GetProcessingr', {
        params: {
            id: formInline.goodsId
        }
    }).then(res => {

        formInline.team = res.data.data.team
        formInline.person = res.data.data.person
        console.log(res.data.data.team)
    })
}
const form = reactive({
    goodsId: 1,
    team: "",
    person: ""
})
const dialogFormVisible = ref(false)
const SaveCultivation = () => {
    axios.post('https://localhost:44301/api/Processingr/AddProcessingr', form).then(res => {
        if (res.data.statusCode == 200) {
            ElMessage.success('保存成功')
            dialogFormVisible.value = false
        }
        else {
            ElMessage.error('保存失败')
        }
    })
}
//#endregion

//#region 供应商信息

//原料
const formrawmaterial = reactive({
    goodsId: userouter.currentRoute.value.query.id,
    rawMaterialProduce: ""
})
const dialogFormVisible2 = ref(false)
const openrawmaterial = () => {
    dialogFormVisible2.value = true
    formrawmaterial.rawMaterialProduce=""
}
const SaveRawMaterial = () => {
    axios.post('https://localhost:44301/api/Processingr/AddrawMaterial', formrawmaterial).then(res => {
        if (res.data.statusCode == 200) {
            ElMessage.success('保存成功')
            dialogFormVisible2.value = false
        }
        else {
            ElMessage.error('保存失败')
        }
    })
}
const getRawMaterial = () => {
    axios.get('https://localhost:44301/api/Processingr/GetRawMaterial', {
        params: {
            id: formrawmaterial.goodsId
        }
    }).then(res => {
        formrawmaterial.rawMaterialProduce = res.data.data.rawMaterialProduce
    })
}
//辅料
const formAccessories = reactive({
    goodsId: userouter.currentRoute.value.query.id,
    accessoriesProduce: ""
})
const dialogFormVisible3 = ref(false)
const SaveAccessories = () => {
    axios.post('https://localhost:44301/api/Processingr/AddAccessories', formAccessories).then(res => {
        if (res.data.statusCode == 200) {
            ElMessage.success('保存成功')
            dialogFormVisible3.value = false
        }
        else {
            ElMessage.error('保存失败')
        }
    })
}
const getAccessories = () => {
    axios.get('https://localhost:44301/api/Processingr/GetAccessories', {
        params: {
            id: formAccessories.goodsId
        }
    }).then(res => {
        formAccessories.accessoriesProduce = res.data.data.accessoriesProduce
    })
}
//添加剂
const formAdditive = reactive({
    goodsId: userouter.currentRoute.value.query.id,
    additiveProduce: ""
})
const dialogFormVisible4 = ref(false)
const SaveAdditive = () => {
    axios.post('https://localhost:44301/api/Processingr/AddAdditive', formAdditive).then(res => {
        if (res.data.statusCode == 200) {
            ElMessage.success('保存成功')
            dialogFormVisible4.value = false
        }
        else {
            ElMessage.error('保存失败')
        }
    })
}
const getAdditive = () => {
    axios.get('https://localhost:44301/api/Processingr/GetAdditive', {
        params: {
            id: formAdditive.goodsId
        }
    }).then(res => {
        formAdditive.additiveProduce = res.data.data.additiveProduce
    })
}
//包材
const formPackaging = reactive({
    goodsId: userouter.currentRoute.value.query.id,
    packagingMaterialsProduce: ""
})
const dialogFormVisible5 = ref(false)
const SavePackaging = () => {
    axios.post('https://localhost:44301/api/Processingr/AddPackagingMaterials', formPackaging).then(res => {
        if (res.data.statusCode == 200) {
            ElMessage.success('保存成功')
            dialogFormVisible5.value = false
        }
        else {
            ElMessage.error('保存失败')
        }
    })
}
const getPackaging = () => {
    axios.get('https://localhost:44301/api/Processingr/GetPackagingMaterials', {
        params: {
            id: formPackaging.goodsId
        }
    }).then(res => {
        formPackaging.packagingMaterialsProduce = res.data.data.packagingMaterialsProduce
    })
}
//#endregion

//#region 企业信息
const formEnterprise = reactive({
    goodsId: 1,
    firmName: "",
    licenseNumber: "",
    ePhoto: ""
})
const handleAvatarSuccess: UploadProps['onSuccess'] = (
    response,
    uploadFile
) => {
    formEnterprise.ePhoto = 'https://localhost:44301' + response
}

const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
    if (rawFile.type !== 'image/jpeg') {
        ElMessage.error('封面照必须是jpg!')
        return false
    } else if (rawFile.size / 1024 / 1024 > 2) {
        ElMessage.error('封面照大小不能超过 2MB!')
        return false
    }
    return true
}
const dialogFormVisible1 = ref(false)
const SaveEnterprise = () => {

    axios.post('https://localhost:44301/api/Processingr/AddPEnterprise', formEnterprise).then(res => {
        if (res.data.statusCode == 200) {
            ElMessage.success('保存成功')
            dialogFormVisible1.value = false
        }
        else {
            ElMessage.error('保存失败')
        }
    })
}
const formpEnterprise = reactive({
    goodsId: 1,
    firmName: "",
    licenseNumber: "",
    ePhoto: ""
})
const getEnterprise = () => {
    axios.get('https://localhost:44301/api/Processingr/GetPEnterprise', {
        params: {
            id: formpEnterprise.goodsId
        }
    }).then(res => {

        formpEnterprise.firmName = res.data.data.firmName
        formpEnterprise.licenseNumber = res.data.data.licenseNumber
        formEnterprise.ePhoto = res.data.data.ePhoto
    })
}
//#endregion

const totSlaughter = () => {
    router.push({
        name: "SlaughterQuery",
        query: ({
            id: formInline.goodsId
        })
    })
}
const toCultivation = () => {
    router.push({
        name: "CultivationQuery",
        query: ({
            id: formInline.goodsId
        })
    })
}

//就绪函数
onMounted(() => {
    getCultivation()
    getEnterprise()
    GetTraceabilities()
    getRawMaterial()
    getAccessories()
    getAdditive()
    getPackaging()
})

</script>
<style scoped>
.avatar-uploader .avatar {
    width: 178px;
    height: 178px;
    display: block;
}
</style>

<style>
.avatar-uploader .el-upload {
    border: 1px dashed var(--el-border-color);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
    border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    text-align: center;
}
</style>